<!DOCTYPE html>
<html>
<head>
    <title>Static Force Analysis Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.font = '22px serif';
        ctx.lineWidth = 2;

        // Function to draw an arrowhead
        function drawArrow(ctx, x, y, angle, size) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(angle);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(-size, size / 2.5);
            ctx.moveTo(0, 0);
            ctx.lineTo(-size, -size / 2.5);
            ctx.stroke();
            ctx.restore();
        }

        // --- Geometric Definitions ---
        // Based on the problem description, using a consistent scale.
        const scale = 80; // pixels per meter
        const B = { x: 220, y: 380 };
        const L_AB = 3 * scale;
        const L_CB = 0.5 * scale;
        const L_BD = 1 * scale;
        const angle_deg = 60;
        const angle_rad = angle_deg * Math.PI / 180;

        // Calculate key points on the beam's centerline
        const A = { x: B.x - L_AB * Math.cos(angle_rad), y: B.y - L_AB * Math.sin(angle_rad) };
        const C_center = { x: B.x - L_CB * Math.cos(angle_rad), y: B.y - L_CB * Math.sin(angle_rad) };
        const D_center = { x: B.x - L_BD * Math.cos(angle_rad), y: B.y - L_BD * Math.sin(angle_rad) };

        // --- Draw Support Structure (Schematic) ---
        // This is drawn to visually match the original image, which is a schematic.
        const supportOutline = new Path2D();
        supportOutline.moveTo(250, 380); // bottom right
        supportOutline.lineTo(140, 380); // bottom left
        supportOutline.lineTo(140, 320); // top left outer
        supportOutline.lineTo(175, 320); // top before left notch
        supportOutline.lineTo(180, 330); // left notch point
        supportOutline.lineTo(185, 320); // top after left notch
        supportOutline.lineTo(185, 380); // left inner wall
        
        supportOutline.moveTo(205, 380); // right inner wall
        supportOutline.lineTo(205, 320); // top before right notch
        supportOutline.lineTo(210, 330); // right notch point
        supportOutline.lineTo(215, 320); // top after right notch
        supportOutline.lineTo(250, 320); // top right outer
        supportOutline.lineTo(250, 380); // close right side
        
        // Define the area to be filled with hatching
        const hatchArea = new Path2D();
        hatchArea.moveTo(140, 380);
        hatchArea.lineTo(140, 320);
        hatchArea.lineTo(185, 320);
        hatchArea.lineTo(185, 380);
        hatchArea.closePath();
        hatchArea.moveTo(205, 380);
        hatchArea.lineTo(205, 320);
        hatchArea.lineTo(250, 320);
        hatchArea.lineTo(250, 380);
        hatchArea.closePath();

        // Apply hatching pattern
        ctx.save();
        ctx.clip(hatchArea);
        ctx.lineWidth = 1.5;
        for (let i = 140 - 70; i < 250 + 70; i += 10) {
            ctx.beginPath();
            ctx.moveTo(i, 320);
            ctx.lineTo(i + 60, 380);
            ctx.stroke();
        }
        ctx.restore();

        // Draw the outline over the hatching for a clean edge
        ctx.lineWidth = 2;
        ctx.stroke(supportOutline);


        // --- Draw the Beam AB ---
        ctx.lineWidth = 7;
        ctx.beginPath();
        ctx.moveTo(A.x, A.y);
        ctx.lineTo(B.x, B.y);
        ctx.stroke();
        ctx.lineWidth = 2; // Reset line width

        // --- Draw Angle Indicator ---
        // Dashed horizontal line
        ctx.save();
        ctx.setLineDash([5, 5]);
        ctx.beginPath();
        ctx.moveTo(B.x, B.y);
        ctx.lineTo(B.x + 100, B.y);
        ctx.stroke();
        ctx.restore();

        // Arc for the angle
        const arcRadius = 80;
        ctx.beginPath();
        ctx.arc(B.x, B.y, arcRadius, -angle_rad, 0); // from beam to horizontal
        ctx.stroke();
        
        // Arrowhead on the arc pointing towards the horizontal line
        const arrowAngleOnArc = 0;
        const arrowX = B.x + arcRadius * Math.cos(arrowAngleOnArc);
        const arrowY = B.y + arcRadius * Math.sin(arrowAngleOnArc);
        drawArrow(ctx, arrowX, arrowY, Math.PI / 2, 10);

        // --- Add Labels ---
        ctx.fillText('A', A.x - 5, A.y - 12);
        ctx.fillText('B', B.x - 28, B.y + 8);
        ctx.fillText('C', C_center.x, C_center.y + 25);
        ctx.fillText('D', D_center.x - 10, D_center.y - 8);
        ctx.fillText('60°', B.x + 20, B.y - 50);

    </script>
</body>
</html>